/*
 * @Description: 顶部预约模块（含广告和咨询）
 * @Author: ziwei.ma
 * @Date: 2019-07-19 14:49:53
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-08-02 17:03:04
 */

<template>
  <div class="top-reservation-warpper flex-v">
    <div class="Ad-placement">
      <img src="../assets/adbanner.png">
    </div>
    <div class="btn-warpper flex-h flex-vc">
      <div
        class="reservation-btn fontsize32 baseBgColorWithActive"
        @click="goToReservationForm"
      >立即预约</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isClick: true
    }
  },
  methods: {
    goToReservationForm() {
      if (this.isClick) {
        this.isClick = false
        this.$AppRouterUtils.open('reservationForm.html?_tv=false&_bbv=false')
        setTimeout(() => {
          this.isClick = true
        }, 1500)
      }
    }
  }
}
</script>

<style scoped>
.top-reservation-warpper {
  height: 464px;
  width: 750px;
  background-color: #fff;
}
/* 广告位 */
.Ad-placement {
  width: 686px;
  height: 280px;
  margin: 16px 32px 0px 32px;
}
.Ad-placement > img {
  width: 686px;
  height: 280px;
}
/* 预约按钮 */

.reservation-btn {
  width: 400px;
  height: 72px;
  line-height: 72px;
  text-align: center;
  border-radius: 36px;
  margin: 48px auto;
  color: #fff;
}
</style>
